﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>SubtractJS</title>
    <link rel="stylesheet" href="css/subtractjs.css" />
    <link rel="stylesheet" href="css/colors.css" />
    <script type="text/javascript" src="Scripts/jQuery-2.0.3.min.js"></script>
    <script type="text/javascript" src="Scripts/Subtract.min.js"></script>
    <script type="text/javascript" src="Scripts/SubtractJSDocumentation.min.js"></script>
</head>
<body>
    <form action="#">
        <div class="sj-fill-top header screenSection fancyblue">
            <div>
                <img class="subtractLogo" src="Images/subtract-logo.png" />
                SubtractJS
            </div>
        </div>
        <div class="sj-fill-top menubar">&nbsp;</div>
        <div class="sj-fill articleBody main">
            <span class="inlineHtml">
                &lt;div class=&quot;sj-fill-top sampleSection&quot;&gt;<span class="inlineText">Header</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-bottom sampleSection&quot;&gt;<span class="inlineText">Footer</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-left sampleSection sampleSectionLeft&quot;&gt;<span class="inlineText">Menu</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill sampleSection&quot;&gt;<span class="inlineText">Body</span>&lt;/div&gt;<br />
            </span>

            <br />
            <br />

            <span class="accentuate1">SubtractJS</span> is a tool for creating quick and easy fixed-width layouts.
            <br />
            <br />
            <span class="accentuate1">SubtractJS</span> works by taking a defined space and "subtracting" an element from it to produce a smaller
            defined space.<br />
            <br />
            A commonly-requested layout I have encountered when developing line-of-business web sites is a request to have a
            <span class="accentuate2">fixed-height</span> header/toolbar at the top, a <span class="accentuate2">fixed-width</span> menu on the left,
            and a <span class="accentuate2">fixed-height</span> footer at the bottom, with the rest of the page dedicated to the specific application
            function.<br />
            <br />
            This looks something like this:<br />
            <br />
            <div class="sampleArea">
                <div class="sj-fill-top sampleSection">Header</div>
                <div class="sj-fill-bottom sampleSection">Footer</div>
                <div class="sj-fill-left sampleSection sampleSectionLeft">Menu</div>
                <div class="sj-fill sampleSection">Body</div>
            </div>

            <br />
            <h2>Header</h2>
            With <span class="accentuate1">SubtractJS</span>, this is simple.  First, you specify the header div (you could also use another tag,
            such as "header").  This looks like this:<br />
            <br />
            <span class="inlineHtml">&lt;div class=&quot;sj-fill-top&quot;&gt;<span class="inlineText">Header</span>&lt;/div&gt;</span><br />
            <br />
            <div class="sampleArea">
                <div class="sj-fill-top sampleSection">Header</div>
                <div class="sj-fill sampleRemaining">&nbsp;</div>
            </div>
            <br />
            <br />
            <h2>Footer</h2>
            Now you have a decision to make.  Do you want the left menu to extend from the header to the bottom of the page?  Or do you
            want the footer to fill the entire width of the page.  If you specify the left menu next, it will fill the entire left of the
            remaining area; however, if you specify the bottom section next, it will fill the width of the entire page, just as our
            specifications call for.<br />
            <br />
            <div style="height: 125px; width: 550px; position: relative;">
                <div class="sampleArea" style="position: absolute; top: 0px; left: 0px;">
                    <div class="sj-fill-top sampleSection">Header</div>
                    <div class="sj-fill-left sampleSection sampleSectionLeft">Menu</div>
                    <div class="sj-fill-bottom sampleSection">Footer</div>
                    <div class="sj-fill sampleRemaining">&nbsp;</div>
                </div>
                <div style="position: absolute; bottom: 0px;">
                    Menu First Option<br />
                </div>

                <div class="sampleArea" style="position: absolute; top: 0px; right: 0px;">
                    <div class="sj-fill-top sampleSection">Header</div>
                    <div class="sj-fill-bottom sampleSection">Footer</div>
                    <div class="sj-fill-left sampleSection sampleSectionLeft">Menu</div>
                    <div class="sj-fill sampleRemaining">&nbsp;</div>
                </div>
                <div style="position: absolute; bottom: 0px; left: 296px;">
                    Footer First Option<br />
                </div>
            </div>

            <br />
            As you can see, we need to specify our footer next to match our specifications.  Now our html looks like this:<br />
            <br />
            <span class="inlineHtml">
                &lt;div class=&quot;sj-fill-top&quot;&gt;<span class="inlineText">Header</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-bottom&quot;&gt;<span class="inlineText">Footer</span>&lt;/div&gt;
            </span><br />
            <br />
            <div class="sampleArea">
                <div class="sj-fill-top sampleSection">Header</div>
                <div class="sj-fill-bottom sampleSection">Footer</div>
                <div class="sj-fill sampleRemaining">&nbsp;</div>
            </div>

            <br />
            <h2>Menu</h2>
            Next we need to specify that our menu section will fill the entire height of the left side of our remaining portion.  Layout sections that
            specify <span class="accentuate2">fill-left</span> or <span class="accentuate2">fill-right</span> must specify a width.<br />
            <br />
            For <span class="accentuate2">fill-top</span> or <span class="accentuate2">fill-bottom</span>, the browser's layout engine will pick an appropriate
            default height based on the content, or you can specify a height, but with <span class="accentuate2">fill-left</span> or
            <span class="accentuate2">fill-right</span>, the default width will be about 100%, leaving no space for your body section.  I usually prefer to
            define the width in the style sheet but for expediency, we can specify it here.<br />
            <br />
            Our html becomes:
            <span class="inlineHtml">
                &lt;div class=&quot;sj-fill-top&quot;&gt;<span class="inlineText">Header</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-bottom&quot;&gt;<span class="inlineText">Footer</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-left&quot; style=&quot;width: 40px;&quot;&gt;<span class="inlineText">Menu</span>&lt;/div&gt;<br />
            </span>
            <br />
            <div class="sampleArea">
                <div class="sj-fill-top sampleSection">Header</div>
                <div class="sj-fill-bottom sampleSection">Footer</div>
                <div class="sj-fill-left sampleSection sampleSectionLeft" style="width: 40px;">Menu</div>
                <div class="sj-fill sampleRemaining">&nbsp;</div>
            </div>
            <br />
            <br />
            <h2>Body</h2>
            Finally, we add a section that will use all of the remaining space.  This section will resize relative to the browser size.
            And our final html is:
            <span class="inlineHtml">
                &lt;div class=&quot;sj-fill-top&quot;&gt;<span class="inlineText">Header</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-bottom&quot;&gt;<span class="inlineText">Footer</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill-left&quot; style=&quot;width: 40px;&quot;&gt;<span class="inlineText">Menu</span>&lt;/div&gt;<br />
                &lt;div class=&quot;sj-fill&quot;&gt;<span class="inlineText">Body</span>&lt;/div&gt;<br />
            </span>
            <br />
            <br />
            <div class="sampleArea">
                <div class="sj-fill-top sampleSection">Header</div>
                <div class="sj-fill-bottom sampleSection">Footer</div>
                <div class="sj-fill-left sampleSection sampleSectionLeft">Menu</div>
                <div class="sj-fill sampleSection">Body</div>
            </div>
            
            <br />
            <br />
        </div>
    </form>
</body>
</html>
